<template>
  <!-- 卡片1 小方块-->
  <view v-if="styleId === 1" class="card-item1">
    <view class="oneMes">
      <view class="imageItem">
        <image class="" src="" mode="aspectFit|aspectFill|widthFix" lazy-load="false"> </image>
      </view>
      <view class="name">
        <text class="" selectable="false" space="false" decode="false"> 甜甜 </text>
      </view>
      <view class="message" hover-class="none" hover-stop-propagation="false"> 25/西城区 </view>
      <view class="message" hover-class="none" hover-stop-propagation="false"> 25/西城区 </view>
      <view class="message" hover-class="none" hover-stop-propagation="false"> 25/西城区 </view>
    </view>
  </view>
  <!-- 卡片2 大长方块-->
  <view class="card-item2" v-else> </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
defineProps<{ styleId: number }>()
</script>

<style scoped lang="scss">
.card-item1 {
  width: 300rpx;
  height: 400rpx;
  border-radius: 30rpx;
  margin: 30rpx 20rpx 40rpx 20rpx;
  box-shadow: 2rpx 5rpx 10rpx -2rpx #dbdbdb;
  background-color: #f9d1da;

  .oneMes {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .imageItem {
      width: 175rpx;
      height: 175rpx;
      border-radius: 50%;
      background-color: #f093ad;
      position: relative;
      top: -30rpx;
    }

    .name {
      color: #f27a9b;
      position: relative;
      top: -20rpx;
    }

    .message {
      color: #f27a9b;
      position: relative;
      top: 20rpx;
    }
  }
}

.card-item2 {
  width: 700rpx;
  height: 400rpx;
  border-radius: 30rpx;
  margin: 50rpx 20rpx 20rpx 20rpx;
  box-shadow: 2rpx 5rpx 10rpx -2rpx #dbdbdb;
  background-color: #f9d1da;
}
</style>
